<template>
  <el-row>
    <el-col :span="18">
      <el-card class="MapContainer">
        <!-- 百度地图实例 -->
        <div class="bmap" id="container"></div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <!-- 站点类型选择 -->
      <el-select
        class="w-full mb-1"
        placeholder="请选择站点类型"
        v-model="queryInfo.stationType"
      >
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 地区选择 -->
      <div class="area-component">
        <el-cascader
          size="large"
          :options="regionData"
          v-model="selectedOptions"
        >
        </el-cascader>
        <!-- <el-select
          placeholder="省"
          style="width: 33%"
          v-model="form.province"
          @change="handleProvinceSelect"
        >
          <el-option
            v-for="item in regionData"
            :key="item.value"
            :label="item.label"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select
          placeholder="市"
          style="width: 33%"
          v-model="form.city"
          :disabled="!form.province || cityList.length == 0"
          @change="handleCitySelect"
        >
          <el-option
            v-for="item in cityList"
            :key="item.value"
            :label="item.label"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select
          placeholder="区"
          style="width: 34%"
          v-model="form.area"
          :disabled="!form.province || !form.city || areaList.length == 0"
          @change="handleAreaSelect"
        >
          <el-option
            v-for="item in areaList"
            :key="item.value"
            :label="item.label"
            :value="item"
          >
          </el-option>
        </el-select> -->
      </div>
      <!-- 搜索框 -->
      <el-input class="mt-1" placeholder="充电桩名称" v-model="queryInfo.query">
        <template #append>
          <el-button :icon="Search" @click="summitForm" />
        </template>
      </el-input>
      <!-- 站点列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :show-header="false"
        height="77vh"
      >
        <el-table-column label="名称">
          <template #default="scope">
            <div>{{ scope.row.name }}</div>
            <div style="font-size: 12px">{{ scope.row.address }}</div>
          </template>
        </el-table-column>
        <el-table-column label="充电桩数" align="right">
          <template #default="scope">
            <div>充电桩数：{{ scope.row.num }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        v-model:current-page="queryInfo.pagenum"
        v-model:page-size="queryInfo.pagesize"
        small="small"
        layout="prev, pager, next, jumper"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script setup>
import { number } from "echarts";
import { regionData } from "element-china-area-data";
import { Search } from "@element-plus/icons-vue";

onMounted(() => {
  initMap();
  createMarker(tableData);
  // initCluster();
});

// 初始化地图函数
function initMap() {
  map = new BMap.Map("container");
  var CenterPoint = new BMap.Point(107.270308, 31.662284); // 创建点坐标
  map.centerAndZoom(CenterPoint, 6); // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom();
  map.setMapStyleV2({
    styleId: "a848018d1f2799b260c5f993f6b19827",
  });
}

// 创建标记点函数
function createMarker(data) {
  data.forEach((item) => {
    var point = new BMap.Point(item.lng, item.lat);
    var marker = new BMap.Marker(point);
    markers.value.push(marker);
    map.addOverlay(marker); //标记点挂载
    //鼠标划入弹开信息窗口
    marker.addEventListener("mouseover", (e) => {
      var size = new BMap.Size(0, -13);
      var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: item.name, // 信息窗口标题
        offset: size, //增加偏移量
      };
      //创建信息窗口对象
      var infoWindow = new BMap.InfoWindow(item.address, opts);
      //对标注对象和信息窗口进行绑定
      map.openInfoWindow(infoWindow, point);
    });
    //鼠标划出发生的事件
    marker.addEventListener("mouseout", function (e) {
      map.closeInfoWindow();
    });
  });
}

// 点聚合函数
// function initCluster() {
//   var cluster = new BMapLib.MarkerClusterer(map);
//   markers.value.forEach((item) => {
//     cluster.addMarker(item);
//   });
// }

let markers = ref([]); // 用于存储标记点
// 地图实例
let map;

//小区列表
const tableData = reactive([
  {
    id: "1",
    name: "广州富力城",
    address: "No. 100, Grove St, Los Angeles",
    num: "123",
    lng: 116.1,
    lat: 39.915,
  },
  {
    id: "2",
    name: "广州万科",
    address: "No. 180, Grove St, Los Angeles",
    num: "123",
    lng: 118.2,
    lat: 30.915,
  },
  {
    id: "3",
    name: "广州碧桂园",
    address: "No. 119, Grove St, Los Angeles",
    num: "123",
    lng: 119.3,
    lat: 30.915,
  },
  {
    id: "4",
    name: "广州富力城",
    address: "No. 189, Grove St, Los Angeles",
    num: "123",
    lng: 120.4,
    lat: 30.315,
  },
  {
    id: "5",
    name: "广州万科",
    address: "No. 180, Grove St, Los Angeles",
    num: "123",
    lng: 118.2,
    lat: 30.215,
  },
  {
    id: "2",
    name: "广州万科",
    address: "No. 180, Grove St, Los Angeles",
    num: "123",
    lng: 118.2,
    lat: 30.1,
  },
]);

//表单请求参数
const queryInfo = reactive({
  query: "", //查询参数
  pagenum: 1, //页码
  pagesize: 5, // 条目个数
  stationType: 1, //站点类型
  // provinceCode: "", //省代码
  // cityCode: "", //市代码
  // regionCode: "", //区代码
  selectedOptions: [],
});

//站点类型列表
const typeList = [
  {
    value: 1,
    label: "电瓶车站点",
  },
  {
    value: 2,
    label: "汽车站点",
  },
  {
    value: 3,
    label: "汽车和电瓶车站点",
  },
];

//地区表单
let form = reactive({
  catteryName: "",
  ownerName: "",
  province: {
    value: "",
    label: "",
    children: [],
  },
  city: {
    value: "",
    label: "",
    children: [],
  },
  area: {
    value: "",
    label: "",
  },
});

//二级城市列表
const cityList = ref([]);
//三级地区列表
const areaList = ref([]);

//改变页码
const handleCurrentChange = (e) => {
  queryInfo.pagenum = e;
};
// //切换省份函数
// const handleProvinceSelect = () => {
//   form.city = "";
//   form.area = "";
//   cityList.value = form.province.children;
// };
// //切换城市函数
// const handleCitySelect = () => {
//   form.area = "";
//   areaList.value = form.city.children;
// };
// //切换地区函数
// const handleAreaSelect = () => {
//   console.log(form);
// };

//提交表单请求
const summitForm = () => {
  // queryInfo.provinceCode = form.province.value
  //   ? form.province.value + "0000"
  //   : "";
  // queryInfo.cityCode = form.city.value ? form.city.value + "00" : "";
  // queryInfo.regionCode = form.area.value ? form.area.value : "";
  console.log(queryInfo);
};
</script>

<style scoped>
.MapContainer {
  --el-card-padding: 0px;
}
.bmap {
  height: 91vh;
}

.area-component {
  display: flex;
  gap: 10px;
}
</style>
